---
title: <TwoFactorCard />
---

The `<TwoFactorCard />` provides a secure interface for managing two-factor authentication (2FA), allowing users to enable or disable 2FA with password confirmation. It handles the complete setup flow including QR code scanning and backup codes generation.

## Usage

Here's how you can include `<TwoFactorCard />` in your settings page:

```tsx
import { TwoFactorCard } from "@daveyplate/better-auth-ui"

export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <TwoFactorCard />
        </div>
    )
}
```

## Styling

Customize the component appearance using Tailwind CSS classes through the `classNames` prop:

```tsx
<TwoFactorCard
    classNames={{
        base: "border-primary shadow",
        header: "bg-primary-foreground",
        title: "text-primary font-semibold text-xl",
        description: "text-muted-foreground",
        content: "bg-background",
        footer: "bg-muted",
        button: "bg-primary hover:bg-primary-foreground",
        instructions: "text-muted-foreground"
    }}
/>
```